<template>
    <div>
        <div class="field">
            <div class="label">类别选择</div>
            <Select v-model="categoryId" class="mb-10">
                <Option v-for="(item,index) in categoryList" :key="item._id" :value="index">{{ item.name }}</Option>
            </Select>
        </div>
        <div class="field">
            <div class="label">标题名称</div>
            <Input v-model="content.title" class="mb-10" placeholder="名称"/>
        </div>
        <div class="field">
            <div>
                已选择的话题：
                <div v-for="item in selectKeywordList" :key="item.id">
                    {{ item }}
                </div>
            </div>
            <div>
                <Tabs  @on-click="handleClickTab"
                       type="card"
                       :animated="animated">
                    <TabPane
                        v-for="(item,index) in keywordList "
                        :key="index"
                        :label="item.type">
                        <Tag
                            checkable
                            color="primary"
                            v-for="(val,i) in item.content"
                            :key="i"
                            @on-change="checkKeyword"
                        :value="i"
                        :name="val">
                            {{ val }}
                        </Tag>
                        <Button
                            icon="ios-add"
                            size="small"

                            @click="handleOpenAddKeywordModal">
                            添加热词
                        </Button>
                    </TabPane>
                </Tabs>
            </div>
        </div>
        <div class="field">
            <div class="label">内容</div>
            <Input v-model="content.content" type="textarea" :rows="4" placeholder=""/>
        </div>
        <Modal
            v-model="newKeywordModal"
            title="添加关键词"
            @on-ok="handleAddKeyword">
            <Input v-model="newKeyword" placeholder=""/>
        </Modal>
    </div>
</template>

<script>
import model from '../util/model';

export default {
    name: 'ContentEdit',
    data: function () {
        return {
            categoryList: [],
            keywordList: [],
            categoryId: null,

            content: {
                category: null,
                title: null,
                keyword: null,
                content: null
            },
            animated : false,
            tabActiveIndex:0,
            newKeywordModal: false,
            newKeyword: '',
            selectKeywordList: []
        };
    },
    created: function () {
        this.getCategoryList();
        this.getKeywordsList();
    },
    methods: {
        //获取分类列表
        getCategoryList: function () {
            let that = this;
            model.contentCategory.find({}, (err, doc) => {
                if (err) {
                    that.$Message.info(err);
                } else {
                    that.categoryList = doc;
                }
            });
        },

        //获取关键词列表
        getKeywordsList: function () {
            let that = this;
            let keyword = {};
            let content = [];
            model.contentKeyword.find({}, (err, docs) => {
                if (err) {
                    return false;
                } else {
                    docs.forEach((value, index) => {
                        keyword = {};
                        content = value.content.split('/');
                        keyword.type = value.type;
                        keyword.content = content;
                        keyword._id = value._id
                        that.keywordList.push(keyword);
                    });

                }
            });
        },
        handleClickTab : function (name) {
            this.tabActiveIndex = name;
        },
        checkKeyword: function (checked,name) {
            let that = this
            let keywordContent = this.keywordList[this.tabActiveIndex].content
            let l = keywordContent.length
            if(this.selectKeywordList.length === 0){
                that.selectKeywordList.push(name)
            }else{
                let selectIndex = this.selectKeywordList.indexOf(name)
                if(selectIndex !== -1){
                    this.selectKeywordList.splice(selectIndex,1)
                }else{
                    that.selectKeywordList.push(name)
                }
            }
        },
        handleOpenAddKeywordModal : function () {
            this.newKeywordModal = true
        },
        handleAddKeyword: function () {
            let that  = this;
            let keywordList = this.keywordList[this.tabActiveIndex]
            let keywordContentList = this.keywordList[this.tabActiveIndex].content
            keywordContentList.push(this.newKeyword)
            let keywordString = '';
            keywordContentList.forEach((value)=>{
                keywordString += value + '/'
            })
            keywordString = keywordString.slice(0,-2)
            model.contentKeyword.update({_id : keywordList._id},{
                type : keywordList.type,
                content : keywordString
            },(err)=>{
                if(err){
                    return false
                }else{
                    that.$Message.info('添加成功')
                }
            })
        },
        createContentKeyword: function () {

        },
    }
};
</script>

<style scoped>

</style>
